<html> 
 
<head> 
<title>000 | Hello Cube | J3D</title> 

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<!--
<script type="text/javascript" src="../lib/glMatrix.js"></script>
<script type="text/javascript" src="../lib/requestAnimationFrame.js"></script>
<script type="text/javascript" src="../src/J3D.js"></script>
<script type="text/javascript" src="../src/util/Color.js"></script>
<script type="text/javascript" src="../src/math/Vector2.js"></script>
<script type="text/javascript" src="../src/math/Vector3.js"></script>
<script type="text/javascript" src="../src/math/Matrix44.js"></script>
<script type="text/javascript" src="../src/engine/Engine.js"></script>
<script type="text/javascript" src="../src/engine/Camera.js"></script>
<script type="text/javascript" src="../src/engine/Light.js"></script>
<script type="text/javascript" src="../src/engine/Geometry.js"></script>
<script type="text/javascript" src="../src/engine/Mesh.js"></script>
<script type="text/javascript" src="../src/engine/Scene.js"></script>
<script type="text/javascript" src="../src/engine/Loader.js"></script>
<script type="text/javascript" src="../src/engine/ShaderAtlas.js"></script>
<script type="text/javascript" src="../src/engine/Texture.js"></script>
<script type="text/javascript" src="../src/engine/Cubemap.js"></script>
<script type="text/javascript" src="../src/engine/Transform.js"></script>
<script type="text/javascript" src="../src/engine/Postprocess.js"></script>
<script type="text/javascript" src="../src/engine/Primitives.js"></script>
<script type="text/javascript" src="../src/engine/FrameBuffer.js"></script>
<script type="text/javascript" src="../src/engine/ShaderSource.js"></script>
<script type="text/javascript" src="../src/renderers/Phong.js"></script>
<script type="text/javascript" src="../src/renderers/Toon.js"></script>
<script type="text/javascript" src="../src/renderers/Gouraud.js"></script>
<script type="text/javascript" src="../src/renderers/Reflective.js"></script>
<script type="text/javascript" src="../src/renderers/Skybox.js"></script>
<script type="text/javascript" src="../src/engine/Shader.js"></script>
<script type="text/javascript" src="../src/util/Time.js"></script>
<script type="text/javascript" src="../src/util/ShaderUtil.js"></script>
-->
	
<script type="text/javascript" src="../build/j3d.js"></script>



<script>
	
	var engine, cube, light;
	
	window.onload = function() {
		
		if(!checkWebGL()) return;
		
		engine = new J3D.Engine();	
		engine.setClearColor(J3D.Color.white);
		
		ambient = new J3D.Transform();
		ambient.light = new J3D.Light(J3D.AMBIENT);
		ambient.light.color = new J3D.Color(0.5, 0.5, 0.5, 1);
		
		light = new J3D.Transform();
		light.light = new J3D.Light(J3D.DIRECT);
		light.light.color = new J3D.Color(0.5, 0.5, 0.5, 1);
		light.rotation = new v3(-Math.PI, 0, Math.PI);
		
		cube = new J3D.Transform();
		cube.geometry = J3D.Primitive.Cube(1, 1, 1);		
		cube.renderer = J3D.BuiltinShaders.fetch("Phong");
		/*	
		 *  Optimization tip
		 * 
		 *  To make sure the uniform value will be set only once,
		 *	assign uniform values to "su" property instead of assigning them directly to the renderer.
		 *	It helps performance, but you can't change this value continously once it's set.
		 *
		 *	"su" stands for "static uniforms". If you want to reload them once set "renderer.reloadStaticUniforms = true"
		 *	
		 *	If the same property exists in "su" and in the renderer - the latter will override the former.
		 */
		//cube.renderer.su.color = new J3D.Color(0,0,0,1);  
		cube.renderer.color = new J3D.Color(1,0,0,1);
		
		camera = new J3D.Transform();
		camera.camera = new J3D.Camera();
		camera.position.z = 4;
		engine.camera = camera;

		engine.scene.add(camera, cube, light, ambient);
		draw();
	}
	
	function draw() {
		requestAnimationFrame(draw);
		cube.rotation.x += Math.PI * J3D.Time.deltaTime / 6000;
		cube.rotation.y += Math.PI/2 * J3D.Time.deltaTime / 3000;
		engine.render();
	}
	
</script>

</head> 

<body>
	<script>
		setLabels("000. Hello cube", "Check <a href='https://github.com/drojdjou/J3D/wiki/How-to-create-a-cube'>here for a quick tutorial</a> on how to build this");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 



</html> 












